<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script src="https://use.fontawesome.com/c0977efc4f.js"></script>

  <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
  <link rel="stylesheet" href="styles/map.css">
  <title>BearMaps</title>
</head>
<body>
  <div class="map-container">
    <div id="mapbody"><img id="map"></div>
  </div>

  <img id="dest" src="marker.gif">
  <div id="markers"></div>
  <div class="actions">
    <div class="widget card">
      <div class="card-content">
        <span class="search-container">
          <label for="tags"></label>
          <input class="search" id="tags" placeholder="Search locations">
        </span>
        <span class="icons-container">
          <a class="zoomin"><i class="action-icon fa fa-2x fa-search-plus" aria-hidden="true"></i></a>
          <a class="zoomout"><i class="action-icon fa fa-2x fa-search-minus" aria-hidden="true"></i></a>
          <a class="info">
            <i class="action-icon fa fa-2x fa-question-circle" aria-hidden="true"></i>
            <div class="info-text">
              You can also use arrow keys and -/= to zoom, or use the mouse drag and scroll wheel.
              Double click to begin routing & double click again to end and show route.
              <div class="info-subtext">( click this bubble to close )</div>
            </div>
          </a>
          <a class="settings-container">
            <i class="action-icon fa fa-2x fa-cog" aria-hidden="true"></i>
            <div class="settings">
              <i class="close-settings fa fa-times-circle-o" aria-hidden="true"></i>
              <div class="settings-title"><strong>Options</strong></div>
              <form class="options" action="">
                <label class="options-label">
                  <input id="constrain-input" type="checkbox" name="constrain"><span>Constrain map dimensions (this may solve problems with zooming out)</span>
                </label><br>
                <div class="settings-title"><strong>Theme:</strong></div>
                <label class="options-label">
                  <input type="radio" name="theme" value="default"><span>Default</span>
                </label><br>
                <label class="options-label">
                  <input type="radio" name="theme" value="cal"><span>Cal</span>
                </label><br>
                <label class="options-label">
                  <input type="radio" name="theme" value="solarized"><span>Solarized Light</span>
                </label><br>
                <label class="options-label">
                  <input type="radio" name="theme" value="eighties"><span>Eighties</span>
                </label>
              </form>
            </div>
          </a>
        </span>
      </div>
    </div>
    <div>
      <a class="clear waves-effect btn">clear route</a>
      <div class="status">
          <div id="status-route" class="card">
            <div class="card-content">
              Double-click again <br> for route endpoint ...
            </div>
          </div>
          <div id="status-loading" class="card">
            <div class="card-content">
              <div class="loader-text">Rastering</div>
              <div class="loader">Loading...</div>
            </div>
          </div>
          <div id="status-error" class="card">
            <div class="card-content">
              Got server-side error! <br> See Java Console
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="directions">
    <div class="card">
      <div class="card-content">
        <span class="directions-container">
          <i class="action-icon fa fa-2x fa-map-signs" aria-hidden="true"></i>
          <div class="directions-window">
            <i class="close-directions fa fa-2x fa-times-circle-o" aria-hidden="true"></i>
            <div class="directions-title"><strong>Route Navigation Directions</strong></div>
            <div class="directions-text" id="directions-text">No routing directions to display.</div>
          </div>
        </span>
      </div>
    </div>
  </div>
  <script src="scripts/map.js"></script>
</body>
</html>
